在 flexbox 的模型中，主軸預設是水平方向，由左往右，那麼交錯軸 (cross axis) 是什麼呢？即使沒接觸過 CSS 的新手，從這一系列的文章看到這裡，大概也猜的到交錯軸是「與主軸交錯」的方向線。

圖 a: 主軸與交錯軸示意圖 (預設值)

預設值的情況下，主軸與交錯軸的關係如上面的示意圖。

但如果我們將昨天的文章中介紹的 flex-direction 設成 column，那麼主軸和交錯軸會怎麼變化呢？

圖 b: 主軸與交錯軸示意圖 (flex-direction 設為 column)

主軸因 flex-direction 設成 column 後，方向變成「從上而下」排列，而交錯軸原本為垂直方向。轉變成水平方向，由左至右排列了。

光看示意圖比較難體會，來看看實際的範例吧！

準備

如果 flexbox 容器本身並沒有設定高度，那麼高度是依照裡面的項目高度，自動撐高的，這樣會看不出來和交錯軸相關的屬性設定對整體佈局的影響，所以在今天的範例準備，一樣是使用前幾天的範例，不同之處是在 .slider 設定了 height: 400px，以及 .item 加了底色。

【查看範例 6-1】

第 9 行：.slider，多加了高度 400px。
第 15 行：.item，上了底色 #6dcff6。

圖 c: 範例 6-1 網頁畫面

瀏覽器的畫面看起來像這樣。基本範例準備好了，那麼就開始看看交錯軸的相關屬性如何影響 Flexbox 的佈局吧！

align-items《交錯軸項目排列》

針對項目元素在行裡的排列。

• normal：預設值，行為同 stretch
• stretch：彈性項目的外框，會拉高到與行同高。
• flex-start：從交錯軸軸起點排列。
• center：置中
• flex-end：從交錯軸軸終點排列。
• baseline：排列的對齊線以項目元素的基線為基準。

normal、stretch

語法：

align-items: stretch;

預設值的 normal 行為同 stretch，它會把項目元素的區塊外框，拉高到和行同高，也就是說，交錯軸有多長，外框會與之相同，這也是範例上底色的原因，比較清楚這個設定值的作用。

flex-start

語法：

align-items: flex-start;

【查看範例 6-2】圖 d: align-items: flex-start 範例

項目元素的區塊外框沒有被撐高到與行同高了。

center

語法：

align-items: center;

【查看範例 6-3】圖 e: align-items: center 範例

項目元素的區塊被移到交錯軸的中間了。雖然看起來是「垂直置中」，但盡量不要意會成垂直置中喔！因為當主軸被設為 flex-direction: column 變成垂直方向，交錯軸就會變成水平方向，就不是垂直置中了。

只要記交錯軸置中即可。

flex-end

語法：

align-items: flex-end;

【查看範例 6-4】圖 f: align-items: flex-end 範例

和 flex-start 相反，這個屬性質會將項目元素從交錯軸方向的終點開始排列。

baseline

語法：

align-items: baseline;

【查看範例 6-5】圖 f: align-items: baseline 範例

排列的對齊線以項目元素的基線為基準，也就是項目元素們的中間，網頁往上拉，看一下 flex-start 的範例圖片就可以清楚這兩個設定值的差異。

align-content《交錯軸內容排列》

這個屬性 align-centent 只能使用在多行。因此這個屬性在 flexbox 容器帶有 flex-wrap: nowrap 不會產生效果，因為它不支援單行。

• normal: 預設值，同 stretch
• stretch：彈性項目元素會撐滿 flexbox 容器。
• flex-start：從交錯軸起點排列。
• center：置中。
• flex-end：從交錯軸終點排列。
• space-between：平均分配位置，第一個子元素貼齊交錯軸起點，最後一個子元素貼齊交錯軸終點。
• space-around：平均分配位置。

normal、stretch

語法：

align-content: stretch;

【查看範例 6-6】圖 g: align-content: stretch 範例

預設值的 normal 行為同 stretch，它會把項目元素的區塊外框，拉高撐滿 flexbox 容器裡的「行」。每一行會彈性分配高度，填滿 flexbox 容器。

透過範例圖片可以清楚瞭解，align-content 的預設值如何處理斷行間的高度。

flex-start

語法：

align-content: flex-start;

【查看範例 6-7】圖 h: align-content: flex-start 範例

flexbox 項目元素們所在的行，並沒有自動撐高了。而是以該行「最高的項目元素」來決定該行的高度。

center

語法：

align-content: center;

【查看範例 6-8】圖 i: align-content: center 範例

flexbox 項目元素們所在的行，被移到交錯軸的中間了。雖然看起來是「垂直置中」，但盡量不要意會成垂直置中喔！因為當主軸被設為 flex-direction: column 變成垂直方向，交錯軸就會變成水平方向，就不是垂直置中了，只要記交錯軸置中即可。

flex-end

語法：

align-content: flex-end;

【查看範例 6-9】圖 j: align-content: flex-end 範例

和 flex-start 相反，這個屬性質會將 flexbox 項目元素們所在的行，從交錯軸方向的終點開始排列。

space-between

語法：

align-content: space-between;

【查看範例 6-10】圖 k: align-content: space-between 範例

flexbox 項目元素們所在的行，會平均分配位置，第一個行貼齊主軸起點，最後的行貼齊主軸終點。
如果斷行超過 2 行，其餘行則平均分配位置。

space-around

語法：

align-content: space-around;

【查看範例 6-11】圖 l: align-content: space-around 範例

flexbox 項目元素們所在的行，會平均分配位置。

屬性搭配

在使用 align-content 的時候，另一個屬性 align-items 正在作用著，只是它是預設值，所以會看到在範例中，每個項目元素都有底色，每個項目元素的外框都撐到與行同高。

【查看範例 6-12】圖 m: 搭配 align-items: center 範例

我們可以改變 align-items 屬性的值，例如設為 center。
align-content: center 是把行移到交錯軸方向的中間，align-items: center 是把行裡面的項目元素移到「該行交錯軸方向的中間」。

透過上圖範例，相信會比較清楚如何使用這兩個屬性囉。

總結

今天介紹了 align-items 和 align-content 兩個屬性。它們和 Slider 套件有何關係？在前端的世界裡，以往要做到一個 DOM 元素或者內容要水平置中加垂直置中，要一些「技巧」才能做到，例如 Stack Overflow 這篇文章，在 flexbox 還沒成為顯學之前，什麼奇奇怪怪的方法只為了置中。

但有了 flexbox，輕鬆解決。當然，Slider 套件要將內容定位，當然也是靠這個，所以關係可大囉。

在下一篇文章將會介紹 flexbox 的子元素會用到的相關屬性。

文中範例可在 GitHub Page 閱讀。
原始碼可在 2022 鐵人賽專用 GitHub Repo 下載。

可下載今日的原始碼，並加上 justify-content: column 或 justify-content: column-reverse，將主軸改變為垂直方向，看看範例在瀏覽器上的畫面會變得如何喔。